<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的hello </title>

    <script src="https://unpkg.com/vue@3.4.32/dist/vue.global.js"></script>
</head>
<body>
<!--
    01 引入依赖 vue
    02 写一个页面
    03 创建vue对象  和 页面绑定
        01 引入 vue 中的函数  createApp, ref
        02 创建vue对象
          let app = createApp({
               setup(){
                  初始化数据
                  return {
                      数据、函数
                  }
               }
            })
        03  绑定页面
        app.mount("#app")
-->
<!--
     使用v-text之后，绑定的内容就会作为标签的文本呈现出现  (不能识别html)
     如果字符串有html标签 就不能使用上面的指令
     使用v-html之后，v-html会对它进行渲染，作为正常html标签进行显示， (可以解析html)
     对于v-bind，可以绑定我们的一些属性
          <a v-bind:href="href"></a>
          <img v-bind:src="src"></img>

     v-bind 可以省略这个 直接:
     <a :href="href">baidu</a>
     <img :src="src"></img>
-->
<div id="app">
     <h1 v-text="msg"></h1>
     <div v-text="msg2"></div>
     <div v-html="msg2"></div>
     <a v-bind:href="href">
            baidu
     </a>
    <img v-bind:src="src"></img>
    <br>

    <a :href="href">baidu</a>
    <img :src="src"></img>

</div>

<script>
    const { createApp, ref } = Vue;
    const app = createApp({
        setup(){

            let msg = ref('中彩票5000w');
            let msg2 = ref('<h1>中彩票了</h1>');
            let href = ref('http://www.baidu.com');
            let src = ref('./images/a.png');
            return {
                msg,msg2,
                href,src
            }
        }
    });
    //3、将创建的vue实例app，和上面的顶级标签进行关联，这个过程叫做挂载
    app.mount('#app');

</script>

</body>
</html>